<template>
    <div class="equipment-overview">
        <div class="equipment-overview-box">
            <div class="sj-text-title text-[18px]">概览统计(个)</div>
            <div class="flex-c mt-[16px]">
                <div v-for="(item, key) in headerTitle" :key="key" class="p-[16px] flex flex-1 cursor-pointer"
                    @click="goDevice(item)">
                    <img :src="getAssetURL(`/src/assets/images/equipment-overview/${key}.png`)"
                        class="w-[42px] h-[42px] mr-[10px] " />
                    <div>
                        <div class="!font-[D-DIN] !text-[22px]">
                            <ReNormalCountTo :endVal="deviceOverviewData ? deviceOverviewData[key] : 0"
                                :duration="Math.random() * 1000 + 1000" />
                        </div>
                        <el-text class="sj-text-secondary-title">
                            {{ isNullOrEmpty(item.name) }}
                        </el-text>
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full">
            <el-row :gutter="16">
                <el-col :span="16" :xs="24">
                    <div class="equipment-overview-box  mt-[16px]">
                        <div class="sj-text-title text-[18px]">近12个月告警状态统计</div>
                        <div class="w-full h-[200px] cross">
                            <Cross :data="alarmData?.alarmMonth"></Cross>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" :xs="24">
                    <div class="equipment-overview-box  mt-[16px]">
                        <div class="sj-text-title text-[18px]">告警统计</div>
                        <div class="w-full h-[200px] pie">
                            <pieChart :data="alarmData?.alarmTypes"></pieChart>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="equipment-overview-box mt-[16px]">
            <div class="sj-text-title text-[18px]">各项目情况</div>
            <pure-table class="mt-5" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)"
                showOverflowTooltip border:isShowPag="false" />
            <div class="mt-5">
                <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
                    :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList"
                    @current-change="getTableList" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty, initPureTableConfig } from '@/utils/functions'
import { ReNormalCountTo } from '@/components/ReCountTo/index'
import { getDeviceOverview, getProjectSituation, getAlarmStatistics } from "@/api/operate/application-system";
import { getAssetURL } from '@/utils/functions'
import { PAGE_LAYOUT } from "@/constant";
import pieChart from "./echarts/pic.vue";
import Cross from "./echarts/cross.vue";
const router = useRouter();
const props = defineProps({
    systemId: {
        type: String,
        default: null
    }
})
const headerTitle = {
    onLine: {
        name: '全部设备',
        value: 0
    },
    normal: {
        name: '正常设备',
        value: 1
    },
    fault: {
        name: '故障设备',
        value: 3
    },
    offLine: {
        name: '离线设备',
        value: 2
    },
    alarm: {
        name: '报警设备',
        value: 4
    },
}
const title = {
    id: '编号',
    unityName: '单位名称',
    projectName: '项目名称',
    deviceCount: '设备总数',
    onLine: '联网设备',
    normal: '正常设备',
    fault: '故障设备',
    offLine: '离线设备',
    alarm: '报警设备',
}

// 跳转页面
const goDevice = (item) => {
    if (item.value !== 0) {
        router.push(
            `/device-management/device-management?commStatus=${item.value}&systematicId=${props.systemId}`
        )
    } else {
        router.push(
            `/device-management/device-management?systematicId=${props.systemId}`
        )
    }

}
const defaultSearchFrom = () => {
    return {
        systematicId: props.systemId,
        page: 1,
        limit: 10
    }
}
const roleTableConfig = [
    { prop: "id", label: title.id, width: 60, align: "left", fixed: "left" },
    { prop: "unityName", label: title.unityName, minWidth: 150 },
    { prop: "projectName", label: title.projectName, minWidth: 150 },
    { prop: "deviceCount", label: title.deviceCount, minWidth: 100 },
    //  { prop: "onLine", label: title.onLine },
    { prop: "normal", label: title.normal, minWidth: 100 },
    { prop: "fault", label: title.fault, minWidth: 100 },
    { prop: "offLine", label: title.offLine, minWidth: 100 },
    { prop: "alarm", label: title.alarm, minWidth: 100 },
];

const searchFrom = ref(defaultSearchFrom())
const deviceOverviewData = ref(null)
const alarmData = ref(null)
const tableData = ref({
    data: [],
    total: 0
})
onMounted(() => {
    getDeviceOverview({ systematicId: props.systemId }).then(res => {
        deviceOverviewData.value = res.result
    })
    getAlarmStatistics({ systematicId: props.systemId }).then(res => {
        alarmData.value = res.result
    })
    getTableList()
})
const getTableList = () => {
    getProjectSituation(searchFrom.value).then(res => {
        tableData.value = res.result
    })
}
</script>
<style lang="scss" scoped>
.equipment-overview {
    .equipment-overview-box {
        @apply w-full p-[16px] dark:bg-[var(--bg-2)] bg-[#fff] rounded-[4px];
    }
}
</style>